<template>
    <div class="listEditTitQueryPreviewWrap">
        <el-form 
            inline class="searchbar" 
            :class="{
                'el-form-item-rowTwo':isHasLongLabel,
                'el-form-item-dateTimePick':isHasDateTimePicker
            }" >
            <!--输入框-->
            <template v-for="(item,index) in pageConfig.searchForm" :key="index">
                <el-form-item 
                    :label="item.label" 
                    v-if="item.type == 'Input'">
                    <el-input
                        v-model="pageConfig.searchFormModel[item.model]"
                        :placeholder="item.placeholder"
                        maxlength="50"
                        clearable
                    ></el-input>
                </el-form-item>
                <!--选择框-->
                <el-form-item 
                    :label="item.label" 
                    v-if="item.type == 'Select'">
                    <el-select
                        v-model="pageConfig.searchFormModel[item.model]"
                        clearable
                        :placeholder="item.placeholder"
                    >
                        <el-option
                            v-for="item in item.options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <!--日期选择器-->
                <el-form-item
                    :label="item.label" 
                    v-if="
                        item.type == 'DatePicker' || 
                        item.type == 'DateTimePicker'|| 
                        item.type == 'datetimerange'">
                    <el-date-picker
                        v-model="pageConfig.searchFormModel[item.model]"
                        :type="forMatDatePicker(item.type)"
                        :placeholder="item.placeholder"
                        :start-placeholder="item.startPlaceholder"
                        :end-placeholder="item.endPlaceholder"
                    />
                </el-form-item>
                <!--时间选择器-->
                <el-form-item
                    :label="item.label"
                    v-if="item.type == 'TimePicker'">
                    <el-time-picker
                        v-model="pageConfig.searchFormModel[item.model]"
                        :placeholder="item.placeholder"
                    />
                </el-form-item>
                <!--时间选择-->
                <el-form-item 
                    :label="item.label" 
                    v-if="item.type == 'TimeSelect'">
                    <el-time-select
                        v-model="pageConfig.searchFormModel[item.model]"
                        :placeholder="item.placeholder"
                    />
                </el-form-item>
            </template>
        </el-form>
    </div>
</template>
<script type="text/javascript">
export default {
    props:{
        pageConfig:{
            type:Object,
            default:() => {}
        }
    },
    data() {
        return {
            index: 0,
            searchForm:[],
            searchFormModel: {},
            isHasLongLabel:false, 
            isHasDateTimePicker:false
        }
    },
    created() {
        this.checkHasLongLabel();
    },
    watch: {

    },
    components: {

    },
    methods: {
        forMatDatePicker(type){
            let forMatType = type;
            return forMatType.split('Picker')[0].toLowerCase();
        },
        checkHasLongLabel(){
            this.isHasLongLabel = false;
            this.isOnlyLine = false;
            this.isHasDateTimePicker = false;
            //判断是否有时间日期选择器
            if(this.pageConfig.searchForm.length > 0){
                for(let j =0; j< this.pageConfig.searchForm.length;j++){
                    let itemInfo = this.pageConfig.searchForm[j];
                    if(itemInfo.type == 'datetimerange'){
                        this.isHasDateTimePicker = true;
                        break
                    }
                }
            }
            //是否是多行
            if(this.pageConfig.searchForm.length > 0){
                for(let i =0; i< this.pageConfig.searchForm.length;i++){
                    let itemInfo = this.pageConfig.searchForm[i];
                    if(itemInfo.label.split('：')[0].length >= 6){
                        this.isHasLongLabel = true;
                        break
                    }
                }
            }
        }
    }
}
</script>
<style type="text/css" lang="less">
.listEditTitQueryPreviewWrap {

}
</style>